<template>
    <div class="login w-50 mx-auto mt-5">
        <h3 class="my-3 text-center">新用户注册</h3>

        <validate-form @form-submit="handleSubmitForm">
            <validate-input
                v-model="form.username"
                tag="input"
                label="用户名"
                placeholder="请输入用户名"
                :rules="usernameRules"
            />

            <validate-input
                v-model="form.password"
                tag="input"
                label="密码"
                placeholder="请输入密码"
                :rules="passwordRules"
            />

            <validate-input
                v-model="form.confirmPassword"
                tag="input"
                label="密码确认"
                placeholder="请再次输入密码"
                :rules="confirmPasswordRules"
            />

            <validate-input
                v-model="form.nickname"
                tag="input"
                label="昵称"
                placeholder="请输入网站显示昵称"
                :rules="nicknameRules"
            />
        </validate-form>
    </div>

    <Message type="error" message="出错了" />
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

import ValidateInput, { RuleProps } from '../components/ValidateInput.vue';
import ValidateForm from '../components/ValidateForm.vue';
import message from '../utils/message';

import { register } from '../api/user';

type State = {
    username: string;
    password: string;
    confirmPassword: string;
    nickname: string;
};

export default defineComponent({
    components: {
        ValidateInput,
        ValidateForm
    },
    setup() {
        const form = reactive<State>({
            username: '',
            password: '',
            confirmPassword: '',
            nickname: ''
        });

        const usernameRules: RuleProps = [
            {
                type: 'required',
                message: '请输入用户名'
            },
            {
                type: 'email',
                message: '请输入正确的邮箱格式'
            },
            {
                type: 'custom',
                message: '长度必须是 4 ～ 20 个字符',
                validator: () => {
                    return /^[\w\W]{4,20}$/.test(form.username);
                }
            }
        ];

        const passwordRules: RuleProps = [
            {
                type: 'required',
                message: '请输入密码'
            },
            {
                type: 'custom',
                message: '长度必须是 4 ～ 20 个字符',
                validator: () => {
                    return /^[\w\W]{4,20}$/.test(form.password);
                }
            }
        ];

        const confirmPasswordRules: RuleProps = [
            {
                type: 'required',
                message: '请输入确认密码'
            },
            {
                type: 'custom',
                message: '两次输入的密码不正确',
                validator: () => {
                    return form.password === form.confirmPassword;
                }
            }
        ];

        const nicknameRules: RuleProps = [
            {
                type: 'required',
                message: '请输入昵称'
            }
        ];

        const handleSubmitForm = async (isOk: boolean) => {
            if (!isOk) {
                message('校验失败', 'error', 1000);
                return;
            }
            const res = await register({ ...form });
            console.log('res', res);
        };

        return {
            form,
            usernameRules,
            passwordRules,
            confirmPasswordRules,
            nicknameRules,
            handleSubmitForm
        };
    }
});
</script>
